<template>
  <div id="app">
    <div class="loginNav">
      <div class="login-cont" v-if="isLogin">
        <div class="login-name"><img class="tx-img" :src="imgSrc" alt="">{{name}}</div>
        <div class="login-name" @click="toCenter">个人中心</div>
        <div class="login-name" @click="logOut">退出登录</div>
      </div>
      <div class="login-cont" v-if="!isLogin">
        <div class="login-button" @click="loginClick">登录</div>
      </div>
      <el-dialog :visible.sync="showDialog_com" @close="changeDialog(false)" :show-close="false" width="400px">
        <p class="login-title">欢迎登录</p>
        <p class="line"></p>
        <div class="input-name">
          <el-input placeholder="请输入账号" v-model="username" clearable>
          </el-input>
          <img class="input-img" src="./assets/user.png" alt="">
        </div>
        <div class="input-div">
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
          <img class="input-img" src="./assets/pass.png" alt="">
        </div>
        <!-- <div class="rem-div">
          <el-checkbox size="medium" v-model="checked">记住密码</el-checkbox>
        </div> -->
        <div class="login-submit" @click="handleLogin">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
      </el-dialog>
    </div>
    <div class="navHeader">
      <div>
        <div class="navItem" v-for="(item,index) in routes" :key="index" @click="urlPush(item)">{{item.title}}</div>
      </div>
    </div>
    <div>
      <router-view />
    </div>
    <div class="footer">
      <div class="foot-cont">
        <div class="logo-cont">
          <img class="logo" src="./assets/LOGO2@2x.png" alt="">
          <p class="logo-text">鄂ICP备09005423号-7 鄂公网安备42018502002264号</p>
        </div>
        <ul>
          <li>地址：湖北省武汉市东湖新技术开发区南湖大道182号</li>
          <li>邮编：430073</li>
          <li>电话：027-88386058</li>
          <li>邮箱：fdc@zuel.edu.cn</li>
        </ul>
        <ul class="ul-center">
          <li class="font-color">快速链接</li>
          <li><a href="">中南财经政法大学</a></li>
          <li><a href="">人事部</a></li>
          <li><a href="">党委教师工作部</a></li>
        </ul>
        <ul>
          <li class="font-color">快速链接</li>
          <li><a href="">中华人民共和国教育部</a></li>
          <li><a href="">中华人民共和国财政部</a></li>
          <li><a href="">湖北省教育厅</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  const sha256 = require('js-sha256').sha256
  // const Base64 = require('js-Base64').Base64
  import Vue from "vue"
  import {
    setToken,
    getToken,
    removeToken
  } from '@/utils/auth'
  import {
    login
  } from "@/api/login"
  import {
    selectTeacherDetail
  } from "@/api/center"
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    name: 'App',
    computed: {
      ...mapState(['showDialog'])
    },
    watch:{
      showDialog(val){
        this.showDialog_com = val
      }
    },
    data() {
      return {
        showDialog_com: false,
        routes: [{
            title: "首页",
            key: "/"
          },
          {
            title: "中心简介",
            key: "/centerintro"
          },
          {
            title: "岗前培训",
            key: "/pretraining"
          },
          {
            title: "初任教师导师制",
            key: "/pretraining"
          },
          {
            title: "在职培训",
            key: "/pretraining"
          },
          {
            title: "离岗进修与实践",
            key: "/pretraining"
          },
          {
            title: "政策文件",
            key: "/policy"
          },
          {
            title: "联系我们",
            key: "/connectus"
          }
        ],
        name: "",
        isLogin: false,
        // showDialog: this.globalShow.showLogin,
        username: "",
        password: "",
        checked: false,
        imgSrc: ""
      }
    },
    methods: {
      ...mapMutations(['changeDialog']),
      loginClick(){
        this.changeDialog(true)
       

      },
      handleLogin() {
        if(!this.username){
          this.$message({
            message: '请输入账号'
          });
          return;
        }
        if(!this.password){
          this.$message({
            message: '请输入密码'
          });
          return;
        }
        let _this = this;
        login({
          username: this.username,
          password: sha256(this.password)
        }).then(res => {
          if (res.code == 200) {
            this.changeDialog(false);
            this.isLogin = true;
            this.name = res.result.loginname;
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            sessionStorage.setItem("id", res.result.id)
            sessionStorage.setItem("name", res.result.loginname)
            sessionStorage.setItem("jobNumber", res.result.jobNumber)
            this.imgSrc = res.result.pictureurl;
            setToken(res.result.token);
            setToken(res.result.id, "globalId");
            setToken(res.result.loginname, "globalName");
            // this.setUserInfo();
            this.$router.push("/")
          } else {
            this.$message(res.message);
          }
        })
      },
      urlPush({
        title,
        key
      }) {
        // window.location = "#" + val
        this.$router.push({
          path: key,
          query: {
            title
          }
        })
      },
      toCenter() {
        window.location = "#/personalcenter"
      },
      logOut() {
        this.$confirm('确认退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已退出登录'
          });
          this.isLogin = false;
          removeToken()
          sessionStorage.setItem("id", "")
          sessionStorage.setItem("name", "")
          sessionStorage.setItem("jobNumber", "")
          this.$router.push("/")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // setUserInfo() {
      //   // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
      //   // 如果没有勾选，储存的信息为空
      //   if (this.checked) {
      //     setToken(this.username, "username")
      //     // Base64加密密码
      //     // let passWord = Base64.encode(this.password);
      //     setToken(passWord, "u_p")
      //     setToken(this.checked, "remember")
      //   } else {
      //     setToken("", "username")
      //     setToken("", "u_p")
      //   }
      // },
      getInfo() {
        let id = sessionStorage.getItem("jobNumber");
        if (id == null) {
          return;
        }
        selectTeacherDetail({
          jobNumber: id
        }).then(res => {
          if (res.code == 200) {
            this.isLogin = true;
            this.name = res.result.loginName;
            this.imgSrc = res.result.pictureUrl;
			console.log(this.imgSrc)
          } else {
            this.isLogin = false;
          }
        })
      }
    },
    created() {
      this.getInfo();
      // let username = getToken("username")
      // // 如果存在赋值给表单，并且将记住密码勾选
      // if (username) {
      //   this.username = username;
      //   // this.password = Base64.decode(getToken("u_p"));
      //   this.checked = true;
      // }
    }
  }
</script>

<style scoped="scoped">
  .login-title {
    text-align: center;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 36px;
    color: #106470;
  }

  .line {
    width: 48px;
    height: 3px;
    background: #106470;
    border-radius: 1px;
    margin: 0 auto;
    margin-top: 10px;
  }

  .loginNav {
    width: 100%;
    height: 40px;
    background-color: #000000;
  }

  .input-name {
    margin-top: 40px;
    position: relative;
  }

  .input-div {
    margin-top: 25px;
    position: relative;
  }

  .input-name /deep/ .el-input__inner {
    padding: 0 45px;
  }

  .input-div /deep/ .el-input__inner {
    padding: 0 45px;
  }

  .rem-div {
    margin-top: 15px;
    height: 30px;
    display: flex;
    align-items: center;
  }

  .rem-div /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #106470;
    border-color: #106470;
  }

  .rem-div /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #106470;
  }

  .rem-div /deep/ .el-checkbox.is-bordered.is-checked {
    border-color: #106470;
  }

  .rem-div /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #106470;
  }

  .login-submit {
    width: 100%;
    height: 42px;
    background: #106470;
    box-shadow: 1px 4px 16px rgba(64, 158, 255, 0.16);
    border-radius: 4px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 42px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 60px;
    cursor: pointer;
  }

  .input-img {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 13px;
    top: 11px;
  }

  .login-cont {
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E9E9E9;
    justify-content: flex-end;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .tx-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .login-name {
    display: flex;
    align-items: center;
    margin-left: 40px;
    cursor: pointer;
  }

  .login-button {
    width: 72px;
    height: 26px;
    background: #0C5963;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
  }

  .navHeader {
    width: 100%;
    height: 68px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navHeader>div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navItem {
    color: #FFFFFF;
    width: 150px;
    font-size: 16px;
    text-align: center;
    height: 68px;
    line-height: 68px;
    cursor: pointer;
  }

  .footer {
    width: 100%;
    height: 256px;
    background: #26323B;
    margin-top: 150px;
  }

  .foot-cont {
    width: 1200px;
    margin: 0 auto;
    padding: 64px 0;
    display: flex;
  }

  .logo-cont {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
  }

  .logo {
    width: 273px;
    height: 65px;
  }

  .logo-text {
    font-size: 10px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    margin-top: 42px;
  }

  ul li {
    list-style: none;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 33px;
    color: #999999;
  }

  ul {
    padding: 0 62px;
  }

  ul .font-color {
    color: #FFFFFF;
  }

  .ul-center {
    border-left: dashed 1px rgba(255, 255, 255, 0.5);
    border-right: dashed 1px rgba(255, 255, 255, 0.5);
  }

  li a {
    text-decoration: none;
    color: #999999;
  }

  li a:hover {
    color: #FFFFFF;
  }
</style>
